{% extends "admin/base.html" %}
{% load static %}

{% block title %}{{ title }} | {{ site_title|default:_('内部导航系统') }}{% endblock %}

{% block branding %}
<h1 id="site-name">
    <a href="{% url 'admin:index' %}">
        <img src="/static/images/favicon.svg" alt="Logo" style="height: 24px; margin-right: 10px; vertical-align: middle;">
        {{ site_header|default:_('内部导航系统管理') }}
    </a>
</h1>
{% endblock %}

{% block extrastyle %}
{{ block.super }}
<style>
    :root {
        --primary: #3b82f6;
        --secondary: #2563eb;
        --accent: #1e40af;
        --primary-fg: #fff;
        
        --body-fg: #333;
        --body-bg: #f5f8fa;
        --body-quiet-color: #666;
        --body-loud-color: #000;
        
        --header-color: #fff;
        --header-branding-color: var(--header-color);
        --header-bg: var(--primary);
        --header-link-color: var(--header-color);
        
        --breadcrumbs-fg: #999;
        --breadcrumbs-link-fg: var(--primary);
        --breadcrumbs-bg: #fff;
        
        --link-fg: var(--primary);
        --link-hover-color: var(--secondary);
        --link-selected-fg: var(--accent);
        
        --hairline-color: #e8e8e8;
        --border-color: #ccc;
        
        --error-fg: #ba2121;
        
        --message-success-bg: #dfd;
        --message-warning-bg: #ffc;
        --message-error-bg: #ffefef;
        
        --darkened-bg: #f8f8f8;
        --selected-bg: #e4e4e4;
        --selected-row: #ffc;
        
        --button-fg: #fff;
        --button-bg: var(--primary);
        --button-hover-bg: var(--secondary);
        --default-button-bg: #f8f8f8;
        --default-button-fg: #333;
        --close-button-bg: #888;
        --close-button-hover-bg: #747474;
        --delete-button-bg: #ba2121;
        --delete-button-hover-bg: #a41515;
        
        --object-tools-fg: var(--button-fg);
        --object-tools-bg: var(--primary);
        --object-tools-hover-bg: var(--secondary);
    }

    /* 改进整体布局 */
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    /* 美化表格样式 */
    #changelist table {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    #changelist table thead th {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
        font-weight: 500;
        padding: 12px 15px;
    }

    #changelist table tbody tr:hover {
        background-color: rgba(59, 130, 246, 0.05);
    }

    /* 美化表单样式 */
    .module {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        overflow: hidden;
        margin-bottom: 24px;
        background: white;
        border: none;
    }

    .module h2 {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
        padding: 14px 16px;
        font-size: 15px;
        font-weight: 500;
    }

    /* 美化按钮样式 */
    .button, input[type=submit], input[type=button], .submit-row input, a.button {
        border-radius: 6px;
        font-weight: 500;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.5px;
        transition: all 0.2s;
        border: none;
        padding: 10px 16px;
    }

    .button:hover, input[type=submit]:hover, input[type=button]:hover, .submit-row input:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    /* 美化输入框样式 */
    input, textarea, select, .form-row p, form .button {
        border-radius: 6px;
    }

    input:focus, textarea:focus, select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
    }

    /* 美化导航菜单 */
    #header {
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        background: linear-gradient(135deg, var(--primary), var(--secondary));
    }

    div.breadcrumbs {
        background: white;
        color: var(--breadcrumbs-fg);
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        padding: 12px 24px;
    }

    /* 美化分页器 */
    .paginator {
        margin: 24px 0;
        line-height: 22px;
    }

    .paginator a, .paginator .this-page {
        padding: 8px 14px;
        border-radius: 6px;
        margin-right: 6px;
    }

    .paginator a:hover {
        background: rgba(59, 130, 246, 0.1);
    }

    .paginator .this-page {
        background: var(--primary);
    }

    /* 美化消息提示 */
    ul.messagelist li {
        border-radius: 6px;
        margin: 12px 0;
        padding: 14px 16px;
    }

    /* 美化图标选择器 */
    .icon-select-wrapper {
        margin-top: 12px;
    }

    .toggle-icon-select {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
        border: none;
        padding: 10px 16px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
        font-weight: 500;
    }

    .toggle-icon-select:hover {
        background: linear-gradient(135deg, var(--secondary), var(--accent));
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    .icon-select-container {
        border-radius: 8px;
        box-shadow: 0 6px 16px rgba(0,0,0,0.15);
        border: 1px solid rgba(0,0,0,0.1);
        overflow: hidden;
    }

    .icon-search {
        padding: 12px 16px;
        border-radius: 6px 6px 0 0;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .icon-select-option {
        transition: all 0.2s;
        padding: 10px;
    }

    .icon-select-option:hover {
        background-color: rgba(59, 130, 246, 0.1);
    }
    
    .icon-select-option.selected {
        background-color: rgba(59, 130, 246, 0.2);
    }
    
    /* 美化登录页面 */
    .login #header {
        height: auto;
        padding: 24px;
        text-align: center;
    }
    
    .login #content {
        padding: 20px;
    }
    
    .login .form-row {
        padding: 8px 0;
    }
    
    .login .submit-row {
        padding: 20px 0 0;
    }
    
    /* 美化选择框 */
    select {
        padding: 8px 12px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        background-color: #fff;
    }
    
    /* 美化复选框和单选框 */
    input[type=checkbox], input[type=radio] {
        margin-right: 6px;
    }
    
    /* 美化过滤器 */
    #changelist-filter {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-left: 15px;
    }
    
    #changelist-filter h2 {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
        padding: 12px 15px;
    }
    
    #changelist-filter ul {
        padding: 10px 15px;
    }
</style>
{% endblock %}

{% block nav-global %}{% endblock %}
